<template>
  <!-- 抄电表 -->
  <view>
    <view class="page" style="padding-bottom: 0;margin-bottom: 0;">
      <view class="sbbh" style="margin-bottom: 0;">
        <view class="sbbh-l"> 租赁企业</view>
        <view class="sbbh-r">
          <view class="inp" @tap="showQySelctFn()">{{ addForm.enterpriseName||'请先选择企业' }}</view>
          <u-icon name="arrow-right" color="#999" size="16"></u-icon>
        </view>
      </view>
    </view>

    <!-- 视图 -->
    <view class="page" v-if="!showQySelect&&selectItem">
      <view class="show-panel">
        <view class="show-col" @click="showLeaseDate=true">
          <text class="show-col-l">租赁周期</text>
          <view class="show-col-r">
            <text
                :style="{color:addForm.feApartment.beginTime==''?'#999':''}"
            >
              {{
                addForm.feApartment.beginTime && addForm.feApartment.endTime ? `${addForm.feApartment.beginTime} 到 ${addForm.feApartment.endTime}` : `请选择周期`
              }}
            </text>
            <u-icon name="arrow-right" color="#999" size="16" class="ml"></u-icon>
          </view>
        </view>
        <view class="show-col" @click="showLeaseFreeDate=true">
          <text class="show-col-l">免租周期</text>
          <view class="show-col-r" :style="{color:addForm.feApartment.rentFreeBeginDate==''?'#999':''}">
            <text>
              {{
                addForm.feApartment.rentFreeBeginDate && addForm.feApartment.rentFreeEndDate ? `${addForm.feApartment.rentFreeBeginDate} 到 ${addForm.feApartment.rentFreeEndDate}` : `选择开始和结束时间，可不选`
              }}
            </text>
            <u-icon name="arrow-right" color="#999" size="16" class="ml"></u-icon>
          </view>
        </view>
        <view class="show-col">
          <text class="show-col-l">租赁模式</text>
          <view class="show-col-r" @click="LeaseTypeSelect.show=true">
            <text>{{ addForm.feApartment.leaseModel ? addForm.feApartment.leaseModel : '请选择租赁模式' }}</text>
            <u-icon name="arrow-right" color="#999" size="16" class="ml"></u-icon>
          </view>
        </view>
        <view class="show-col">
          <text class="show-col-l">收费类型</text>
          <view class="show-col-r" @click="feeModelTypeSelect.show=true">
            <text>{{ addForm.feApartment.feeModel ? addForm.feApartment.feeModel : '请选择收费类型' }}</text>
            <u-icon name="arrow-right" color="#999" size="16" class="ml"></u-icon>
          </view>
        </view>
        <template v-if="addForm.feApartment.leaseModel=='按面积'">
          <view class="show-col">
            <text class="show-col-l">合同总面积 (m²)</text>
            <view class="show-col-r">
              <input v-model="addForm.feApartment.contractArea" placeholder="请填写面积" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="show-col">
            <text class="show-col-l">租金单价 (元)</text>
            <view class="show-col-r">
              <input v-model="addForm.feApartment.areaPrice" placeholder="请填写价格" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="show-col">
            <text class="show-col-l">物管费单价 (元)</text>
            <view class="show-col-r">
              <input v-model="addForm.feApartment.propertyPrice" placeholder="请填写价格" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="show-col">
            <text class="show-col-l">设施使用费单价 (元)</text>
            <view class="show-col-r">
              <input v-model="addForm.feApartment.facilityPrice" placeholder="请填写价格" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>
        </template>

        <view class="show-col" @click="showNextDate=true">
          <text class="show-col-l">下期账单日期</text>
          <view class="show-col-r">
            <text  :style="{color:addForm.feApartment.nextPropertyDate==''?'#999':''}">
              {{
                addForm.feApartment.nextPropertyDate ||`请选择日期`
              }}
            </text>
            <u-icon name="arrow-right" color="#999" size="16" class="ml"></u-icon>
          </view>
        </view>


        <view class="show-col">
          <text class="show-col-l">首期账单收费方式</text>
          <view class="show-col-r" @click="firstFeeModelSl.show=true">
            <text>{{ addForm.feApartment.firstFeeModel ? addForm.feApartment.firstFeeModel : '请选择收费类型' }}</text>
            <u-icon name="arrow-right" color="#999" size="16" class="ml"></u-icon>
          </view>
        </view>




      </view>


      <view style="display: flex;justify-content: space-between;align-items: center">
        <view class="info-tit">
          房源列表
        </view>
        <view class="r-unit">
          单位：元
        </view>
      </view>


      <view class="show-panel" style="border-radius: 12rpx 12rpx 0 0;margin-bottom: 0;">
        <view class="table-col table-tit">
          <view class="table-col-c" style="width: 38%">房源编号</view>
          <view class="table-col-c" style="width: 26%">租金/间</view>
          <view class="table-col-c" style="width: 18%">物管费</view>
          <view class="table-col-c" style="width: 18%">保证金</view>
        </view>

        <view class="table-col" v-for="(item,index) in addForm.roomVOList" :key="index">
          <view class="table-col-c" style="width: 38%">{{ item.roomNum }}</view>
          <view class="table-col-c" style="width: 26%">
            <input v-model="item.areaPrice" placeholder="请填写" type="number"
                   placeholder-class="placeholder"/>
          </view>
          <view class="table-col-c" style="width: 18%">
            <input v-model="item.propertyFee" placeholder="请填写" type="number"
                   placeholder-class="placeholder"/>
          </view>
          <view class="table-col-c" style="width: 18%">
            <input v-model="item.facilityFee" placeholder="请填写" type="number"
                   placeholder-class="placeholder"/>
          </view>
        </view>
      </view>

      <view class="add-house" @click="showHousePop=true">
        <view class="add-house-c">
          <u-icon name="plus" color="#44D94B" size="16" class="mr addicon"></u-icon>
          <text>添加/取消房源</text>
        </view>
      </view>

      <view class="xb-bottom-btn" hover-class="button-hover" v-if="selectItem" @click="submitFn">
        提交
      </view>
    </view>

    <!-- 新增企业s -->
    <view class="bh-select" v-show="showQySelect">
      <view class="bh-select-t" @click="showAddQyPop=true">
        <view class="bh-select-t-c">
          <u-icon name="plus" class="plus-icon" color="#fff"></u-icon>
          <text>新增企业</text>
        </view>
      </view>
      <view>
        <mescroll-body style="padding-bottom: 100rpx" class="select_scroll" ref="mescrollRef"
                       @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
          <view class="select_list_col" v-for="item in dataList" :key="item.id" @click="qyItemCheck(item)">
            <view class="select_list_col_l">
              <view class="select_list_col_l_l" :style="addForm.enterpriseName==item.enterpriseName?'background:#44D94B;border:none':''"></view>
              <view class="select_list_col_l_r">
                <view class="b-l">
                  <text v-if="item.enterpriseName">{{ item.enterpriseName }}</text>
                </view>
              </view>
            </view>
          </view>
        </mescroll-body>
      </view>

      <view class="xb-bottom-btn" hover-class="button-hover"  @click="showQySelect = false">
        取消
      </view>

    </view>
    <!-- 新增企业e -->

    <postSuccess v-if="showSuccess">
      <view slot="txt" class="suc-btnbox">
<!--        <view @click="navToDetails">查看提交信息</view>-->
<!--        <view @click="chaoAway">继续抄表</view>-->
      </view>
    </postSuccess>

    <u-calendar v-model="showLeaseDate" mode="range" max-date="2100" @change="leaseDateFn"></u-calendar>
    <u-calendar v-model="showNextDate" mode="date" max-date="2100" @change="nextDateFn"></u-calendar>
    <u-calendar v-model="showLeaseFreeDate" mode="range" max-date="2100" @change="leaseFreeDateFn"></u-calendar>
    <u-select v-model="LeaseTypeSelect.show" :list="LeaseTypeSelect.list" @confirm="leaseTypeConfim"></u-select>

    <u-select v-model="feeModelTypeSelect.show" :list="feeModelTypeSelect.list" @confirm="feeModelTypeConfim"></u-select>
    <u-select v-model="firstFeeModelSl.show" :list="firstFeeModelSl.list" @confirm="firstFeeModelSlConfim"></u-select>

    <u-popup v-model="showAddQyPop" mode="bottom" length="70%" closeable>
      <view class="pop-box">
        <view class="pop-box-top">
          <view class="pop-box-tit">新增企业</view>
        </view>
        <view style="padding:0 20rpx">
          <view class="show-panel" style="margin-top: 120rpx">
            <view class="show-col">
              <view class="show-col-l">企业名称</view>
              <view class="show-col-r">
                <input v-model="addQyForm.enterpriseName" placeholder="请填企业名称" type="number"
                       placeholder-class="placeholder"/>
              </view>
            </view>
          </view>

          <view class="show-panel">
            <view class="show-col">
              <view class="show-col-l">企业联系人</view>
              <view class="show-col-r">
                <input v-model="addQyForm.enterpriseContact" placeholder="请填写联系人" type="number"
                       placeholder-class="placeholder"/>
              </view>
            </view>

            <view class="show-col">
              <view class="show-col-l">联系人电话</view>
              <view class="show-col-r">
                <input v-model="addQyForm.contactPhone" placeholder="请填写电话" type="number"
                       placeholder-class="placeholder"/>
              </view>
            </view>
          </view>
        </view>

        <view class="xb-bottom-btn" hover-class="button-hover"  @click="addQyFn">
          确认
        </view>
      </view>
    </u-popup>

    <u-popup v-model="showHousePop" mode="bottom" length="70%" closeable>
      <view class="pop-box">
        <view class="pop-box-top">
          <view class="pop-box-tit">选择房源</view>
          <view class="lease-house-search">
            <view class="lease-house-search-c">
              <u-icon name="search" color="#999999" class="sear-icon"></u-icon>
              <input type="text" v-model="houseSearchObj.roomNum" placeholder="请输入内容进行搜索" style="padding-left: 16rpx"
                     @input="roomSearchFn"/>
            </view>
            <div class="lease-house-search-se">
              <view class="fen_col" @click="houseLocationSl.show=true">
                <span>{{ houseLocationSl.val }}</span>
                <u-icon name="arrow-down" color="#666"></u-icon>
              </view>

              <view class="fen_col" @click="houseTypeSl.show=true">
                <span>{{ houseTypeSl.val }}</span>
                <u-icon name="arrow-down" color="#666"></u-icon>
              </view>
            </div>
            <!--          <text @click="closeSelctFn()" class="cancle-txt">取消</text>-->
          </view>
        </view>
        <view class="pop-box-c">
          <scroll-view class="leasepop-scroll">
            <view class="real-select-col" v-for="item in roomList" :key="item.id" @click="houseItemCheck(item)">
              <view class="real-select-l">
                <view class="check-circle" :style="item.select?'background:#44D94B;border:none':''">
                  <u-icon name="checkmark" color="#fff" style="margin-top: 4rpx;"></u-icon>
                </view>
              </view>
              <view class="real-select-r">
                <view class="real-select-r-t">
                  {{ item.roomNum }}
                </view>
                <view class="real-select-r-b">
                  <text>面积： {{ item.builtUpArea }}㎡</text>
                  <text>类型：{{item.capacity}}</text>
                </view>
              </view>
            </view>
          </scroll-view>

        </view>

        <view class="xb-bottom-btn" hover-class="button-hover"  @click="showHousePop=false">
          确认
        </view>

        <u-select v-model="houseLocationSl.show" :list="houseLocationSl.list" @confirm="houseLocationSlConfim"></u-select>

        <u-select v-model="houseTypeSl.show" :list="houseTypeSl.list" value-name="dictValue" label-name="dictLabel" @confirm="houseTypeSlConfim"></u-select>
      </view>
    </u-popup>


  </view>
</template>
<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

export default {
  mixins: [MescrollMixin], // 使用mixin
  name: "leaseRecord",
  data() {
    return {
      showNextDate:false,
      showLeaseDate:false,
      showLeaseFreeDate:false,
      showSuccess: false,
      searchVal: '',
      showAddQyPop:false,
      showHousePop: false,
      showQySelect: false,
      roomList:[],
      addQyForm:{
        enterpriseName:'',
        enterpriseContact:'',
        contactPhone:''
      },
      houseLocationSl:{
        show: false,
        val: '全部园区',
        list: [
          {
            value: '',
            label: '全部园区'
          },
          {
            value: 'A',
            label: 'A区'
          },
          {
            value: 'B',
            label: 'B区'
          }
        ]
      },
      houseTypeSl:{
        show: false,
        val: '全部房间类型',
        list: [
          {
            value: '',
            label: '全部房间类型'
          }
        ]
      },
      feeModelTypeSelect:{
        show: false,
        val: '',
        list: [
          {
            value: '按月',
            label: '按月'
          },
          {
            value: '按季度',
            label: '按季度'
          }
        ],
      },
      LeaseTypeSelect: {
        show: false,
        val: '',
        list: [
          {
            value: '按间',
            label: '按间'
          },
          {
            value: '按面积',
            label: '按面积'
          }
        ],
      },
      firstFeeModelSl:{
        show: false,
        val: '按天',
        list: [
          {
            value: '按天',
            label: '按天'
          },
          {
            value: '按月/季',
            label: '按月/季'
          }
        ]
      },
      addForm: {
        "recordType": 1,
        "enterpriseName": "",
        "enterpriseId": "",
        "apartmentFeeId": null,
        "facilityFeeId": null,
        "roomIdList": [],
        "roomVOList": [],
        "fileIdList": [],
        "feApartment": {
          "beginTime": "",
          "endTime": "",
          "rentFreeBeginDate": "",
          "rentFreeEndDate": "",
          "contractArea": "",
          "calculationMode": "自动计费",
          "feeModel": "按月",
          "leaseModel": "按间",
          "recordState": "未到期",
          "effect": "已生效",
          "areaPrice": "",
          "propertyPrice": "",
          "facilityPrice": "",
          "nextPropertyDate": "",
          firstFeeModel:'按天'
        },
        "recordState": "未到期"
      },
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      selectItem: null,
      dataList: [],
      houseSearchObj:{
        parkNum:'',
        leaseState:0,
        roomType: '公寓',
        state: '租赁',
        capacity:'',
        roomNum:''
      }
    };
  },
  // watch:{
  //   roomSearchVal(val){
  //     this.roomList=this.roomList.search()
  //   }
  // },
  onLoad(option) {
    this.getList()
    this.getDictType()
  },
  methods: {
    leaseDateFn(e){
      let startDate=e.startDate
      let endDate=e.endDate
      this.addForm.feApartment.beginTime=startDate
      this.addForm.feApartment.endTime=endDate
    },
    nextDateFn(e){
      let date=e.result
      this.addForm.feApartment.nextPropertyDate=date
    },
    leaseFreeDateFn(e){
      let startDate=e.startDate
      let endDate=e.endDate
      this.addForm.feApartment.rentFreeBeginDate=startDate
      this.addForm.feApartment.rentFreeEndDate=endDate
    },
    roomSearchFn(){
      this.getHouseList()
    },
    getList(){
      this.getHouseList()
    },
    getDictType(){
      this.apis.commonApi.getDict("lodging_type").then(res=>{
        let list=res.data
        let resList=[
          {
            dictLabel:'全部房间类型',
            dictValue:''
          },
          ...list
        ]
        this.houseTypeSl.list=resList
      })
    },
    getHouseList(){
      this.apis.buildingApi.buiRoomList(this.houseSearchObj).then(res=>{
        this.roomList=res.rows
        if (this.addForm.roomIdList.length>0){
          this.addForm.roomIdList.forEach(id=>{
            for (let j=0;j<this.roomList.length;j++){
              if (this.roomList[j].id==id){
                this.roomList[j].select=true
              }
            }
          })
        }
      })
    },
    // 模糊搜索
    fuzzySearch (list,search){
      let data = [];
      if(list.length != 0 && search){
        let str = `\S*${search}\S*`;
        let reg = new RegExp(str,'i');//不区分大小写
        list.map(item => {
          if(reg.test(item)){
            data.push(item);
          }
        })
      }
      return data;
    },
    houseItemCheck(item){
      if (item.select){
        item.select=false
        for (let i=0;i<this.addForm.roomIdList.length;i++){
          if (item.id==this.addForm.roomIdList[i]){
            this.addForm.roomIdList.splice(i,1)
            this.addForm.roomVOList.splice(i,1)
          }
        }
      }else {
        item.select=true
        this.addForm.roomIdList.push(item.id)
        this.addForm.roomVOList.push(item)
      }
    },
    qyItemCheck(item) {
      this.selectItem = item
      this.addForm.enterpriseName=item.enterpriseName
      this.addForm.enterpriseId=item.id
      this.showQySelect = false;
    },
    showQySelctFn() {
      this.dataList = [];
      this.showQySelect = true;
      this.mescroll.resetUpScroll();
    },
    houseLocationSlConfim(e) {
      let res = e[0].value
      this.houseSearchObj.parkNum = res
      this.houseLocationSl.val=e[0].label
      this.getHouseList()
    },
    houseTypeSlConfim(e){
      let res = e[0].value
      this.houseSearchObj.capacity = res
      this.houseTypeSl.val=e[0].label
      this.getHouseList()
    },
    leaseTypeConfim(e) {
      let res = e[0].value
      this.addForm.feApartment.leaseModel = res
    },
    feeModelTypeConfim(e){
      let res = e[0].value
      this.addForm.feApartment.feeModel=res
    },
    firstFeeModelSlConfim(e){
      let res = e[0].value
      this.addForm.feApartment.firstFeeModel=res
    },
    addQyFn(){
      if (this.isEmpty(this.addQyForm.enterpriseName) ){
        this.showToast('请输入企业名')
        return false
      }
      if (this.isEmpty(this.addQyForm.enterpriseContact) ){
        this.showToast('请输入联系人')
        return false
      }
      if (this.isEmpty(this.addQyForm.contactPhone) ){
        this.showToast('请输入联系电话')
        return false
      }
      this.apis.businessApi(this.addQyForm).then(res=>{
        if (res.code == 200) {
          this.mescroll.resetUpScroll();
          this.showAddQyPop=false

        }else {
          this.showToast(res.msg)
        }
      })
    },
    submitFn() {
      console.log("feApartment.beginTime",this.addForm.feApartment.beginTime,"feApartment.endTime",this.addForm.feApartment.endTime)
      let rules = [
        // {name: 'feApartment.beginTime', type: 'required', errmsg: '请正确选择租赁周期'},
        // {name: 'feApartment.endTime', type: 'required', errmsg: '请正确选择租赁周期'},
        {name: 'feApartment.nextPropertyDate',type: 'required', errmsg: '请选择下期账单日期'},
        {name: 'roomIdList', type: 'required', errmsg: '请选择租赁房源'},
      ]
      let valLoginRes = this.$validate.validate(this.addForm, rules)
      if (!valLoginRes.isOk) {
        this.showToast(valLoginRes.errmsg)
      }else {
        this.apis.buildingApi.addFeApartment(this.addForm).then(res=>{
          if (res.code == 200) {
            this.showSuccess = true;
          }else {
            this.showToast(res.msg)
          }
        })
      }

    },
    downCallback() {
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.apis.businessApi
          .qyEnterpriseList({
            pageNum: page.num,
            pageSize: page.size,
            settledState: 0
          })
          .then((res) => {
            this.dataList = this.dataList.concat(res.rows);
            this.mescroll.endBySize(res.rows.length, res.total);
          });

    },
    navToDetails() {
      this.navTo(
          "/pagesEnergy/hydroelectric/Details?meterId=" + this.addForm.meterId
      );
    }
  },
};
</script>

<style lang="scss" scoped>
// @import '../../common/css/icons.css';
// @import './../../uni.less';

.page {
  padding-bottom: 112rpx;
  font-size: 28rpx;

  font-weight: 500;
  color: #666666;
}

.ml {
  margin-left: 10rpx;
}

.mr {
  margin-right: 10rpx;
}

.gray {
  color: #999999;
}

.black {
  color: #333333;
}

.sbbh {
  margin-bottom: 20rpx;
  box-sizing: border-box;
  padding: 30rpx 32rpx;
  width: 100%;
  background: #ffffff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .sbbh-l {
    flex-shrink: 0;
    font-size: 28rpx;

    font-weight: 500;
    color: #666666;
  }

  .sbbh-r {
    display: flex;
    align-items: center;

    .inp {
      width: 100%;
      padding-left: 20rpx;
      margin-right: 8rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }

  }
}

.xb-card {
  padding: 0 32rpx;
  margin-bottom: 20rpx;

  view {
    padding-top: 28rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:last-child {
      border: none;
    }
  }

  text:nth-child(2) {
    font-size: 28rpx;

    color: #333333;
  }
}

.bh-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  .wicon {
    padding-top: 2rpx;
    height: 100%;
    margin-left: 12rpx;
    @include flexCenter;
  }

  .select_list_col {
    box-sizing: border-box;
    padding: 0 52rpx 0 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 148rpx;
    background-color: #fff;
    border-radius: 12rpx;
    border-bottom: 1rpx solid #eeeeee;

    &:last-child {
      border: none;
    }

    .b-l {
      text {
        margin-right: 20rpx;
      }
    }

    .select_list_col_l {
      display: flex;
      align-items: center;

      .select_list_col_l_l {
        margin-right: 24rpx;
        width: 42rpx;
        height: 42rpx;
        border-radius: 50%;
        border: 1rpx solid #cecece;
      }

      .select_list_col_l_r {
        view:nth-child(1) {
          font-size: 28rpx;

          font-weight: 500;
        }

        view:nth-child(2) {
          margin-top: 6rpx;
          font-size: 24rpx;

          font-weight: 500;
          color: #666666;
        }
      }
    }

    .select_list_col_r {
      flex-shrink: 0;
      font-size: 24rpx;

      font-weight: 400;
      color: #666666;
    }
  }

  .bh-select-t {
    z-index: 9;
    width: 100%;
    height: 76rpx;
    background: #EFFFF0;
    display: flex;
    align-items: center;
    justify-content: center;

    .bh-select-t-c {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #44D94B;

      .plus-icon {
        margin-right: 14rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;
        background: #44D94B;
        border-radius: 50%;
      }
    }
  }
}

.suc-btnbox {
  margin-top: 60rpx;
  display: flex;

  view {
    @include flexCenter;
  }

  view:nth-child(1) {
    width: 220rpx;
    height: 80rpx;
    background: #f8f8f8;
    border-radius: 2rpx;
    font-size: 26rpx;

    font-weight: 400;
    color: #7b7b7b;
    border: 1rpx solid #dcdcdc;
  }

  view:nth-child(2) {
    margin-left: 40rpx;
    width: 220rpx;
    height: 80rpx;
    background: #f8f8f8;
    border-radius: 2rpx;
    font-size: 26rpx;

    font-weight: 400;
    color: #44d94b;
    border: 1rpx solid #44d94b;
  }
}

.add-house {
  width: 100%;
  height: 96rpx;
  background: #EFFFF0;
  opacity: 1;
  @include flexCenter();

  .add-house-c {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #44D94B;

    .addicon {
      width: 42rpx;
      height: 42rpx;
      border: 2rpx solid #44D94B;
      border-radius: 50%;
      @include flexCenter();
    }
  }
}

.pop-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;

  .pop-box-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 2;

    .pop-box-tit {
      width: 100%;
      height: 100rpx;
      background: #fff;
      @include flexCenter;
    }
  }

  .pop-box-c {
    width: 100%;
    flex: 1;
    padding-top: 264rpx;

    .leasepop-scroll {
      width: 100%;
      height: 100%;
      background: #f8f8f8;
      padding-bottom: 160rpx;
    }
  }

}

.lease-house-search {
  box-sizing: border-box;
  padding: 0 20rpx;
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  .lease-house-search-se {
    padding-top: 10rpx;
    height: 90rpx;
    display: flex;
    .fen_col {
      margin-right: 10rpx;
      height: 60rpx;
      flex: 1;
      padding: 0 30rpx;
      background-color: #F5F5F5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #333333;
      border-radius: 10rpx;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .lease-house-search-c {
    display: flex;
    flex: 1;
    background: #F5F5F5;
    border-radius: 12rpx;
    padding: 16rpx 22rpx;

    height: 70rpx;

    .sear-icon {
      padding-right: 20rpx;

    }
  }

  .cancle-txt {
    display: block;
    padding-left: 20rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
  }


  input {
    flex-grow: 1;
    font-size: 28rpx;
    border: none;
    justify-content: flex-end;
    font-weight: 400;
    color: #333333;
  }
}

.real-select-col {
  width: 100%;
  height: 138rpx;
  position: relative;
  background: #fff;
  padding: 28rpx 24rpx;
  display: flex;

  &:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rpx;
    transform: scaleY(0.5);
    background: #eee;
    content: "";
  }

  .real-select-l {
    display: flex;
    align-items: center;

    .check-circle {
      margin-right: 24rpx;
      width: 42rpx;
      height: 42rpx;
      border-radius: 50%;
      border: 1rpx solid #cecece;
      @include flexCenter();
    }
  }


  .real-select-r {
    flex: 1;
    height: 100%;

    .real-select-r-t{

    }

    .real-select-r-b{
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;
      text:nth-child(1){
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
      }
      text:nth-child(2){
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
      }
    }
  }

}

.r-unit {
  padding-right: 32rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #999999;
}
</style>
